<template>
  <div class="box">
      <!-- <div class="share-poster-box">
       <div class="poster-top">
            <img :src="data.poster.posterSrc" alt="" :style="data.poster.posterStyle">
       </div>
        <div :style="data.content.style">
            <div :style="data.content.leftStyle">
                <div :style="data.content.photoBox.style">
                    <img :src="data.content.photoBox.photoSrc" alt="" :style="data.content.imgStyle">
                </div>
                <div>
                    <h3 :style="data.content.nickname.style">{{data.content.nickname.text}}</h3>
                    <p :style="data.content.title.style">{{data.content.title.text}}</p>
                    <span :style="data.content.tag.style"> {{data.content.tag.text}}</span>
                </div>
            </div>
            <div :style="data.content.rightStyle">
                <div :style="data.content.codeBox.style">
                    <img :src="data.content.codeBox.codeSrc" alt="" :style="data.content.imgStyle">
                </div>
                <p>{{data.content.codeText}}</p>
            </div>
        </div>
      </div> -->
      <!-- 自定义模板 -->
      <!-- <div class="share-poster-box">
          <div class="poster-top">
            <img src="@/assets/images/poster-custom.png" alt="">
          </div>
        <div class="poster-content">
            <div class="content-left">
                <div class="photo-box">
                    <img src="@/assets/temporary/mine-photo.png" alt="">
                </div>
                <div>
                    <h3>远方的风</h3>
                    <p>邀你一起加入云游趣</p>
                    <span> 一个有温度的旅行商城</span>
                </div>
            </div>
            <div class="content-right">
                <div class="code-box">
                    <img src="@/assets/temporary/code.png" alt="">
                </div>
                <p>长按识别</p>
            </div>
        </div>
    </div> -->
      <!-- 默认模板 -->
      
      <div class="share-poster-box">
          <div class="poster-top">
                  <img src="@/assets/images/poster-default.png" alt="">
              <div class="poster-top-content">
                  <p class="poster-top-title">山西黄小米粥黄小米新米特产5斤2019年5斤2019年</p>
                  <div class="poster-top-price">
                      ￥<b class="new-price">28.5</b><del class="old-price">￥59</del>
                  </div>
              </div>
          </div>
          <div class="poster-content">
                <div class="content-left">
                    <div class="photo-box">
                        <img src="@/assets/temporary/mine-photo.png" alt="">
                    </div>
                    <div>
                        <h3>远方的风</h3>
                        <p>推荐您享受云游GO内购优惠</p>
                    </div>
                </div>
                <div class="content-right">
                    <div class="code-box">
                        <img src="@/assets/temporary/code.png" alt="">
                    </div>
                    <p>长按识别</p>
                </div>
            </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:[//type 0 默认模板，type 1 自定义模板
                {
                    "type":"0",
                    "imgStyle":{"display":"block","width":"100%"},
                    "poster":{"posterSrc":"poster.png","posterStyle":{"display":"block","width":"100%"},"posterTopContentStyle":{"padding":"1.33vw","background-color":"#fff"},"posterTopTitle":{"style":{"overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap","font-size":"4.26vw"},"text":"山西黄小米粥黄小米新米特产5斤2019年5斤2019年"},"posterTopPrice":{"style":{"color":"#FF6600","font-size":"4.26vw"},"text":"￥","newPrice":{"style":{"font-size":"6.93vw"},"text":"28.5"},"oldPrice":{"style":{"color":"#999","font-size":"3.73vw"},"text":"￥59"}},},
                    "content":{"style":{"display":"flex","justify-content": "space-between","align-items": "center","padding":"2.6vw","backgroundColor":"#fff"},"leftStyle":{"display":"flex","line-height":"6vw"}, "photoBox":{"style":{"width":"16vw","height":"16vw","border-radius":"50%","overflow":"hidden"},"photoSrc":"photo.png"},"nickname":{"style":{"font-size":"4.2vw","color":"#333"},"text":"远方的风"},"title":{"style":{"font-size":"4.2vw","color":"#999"},"text":"推荐您享受云游GO内购优惠"},"rightStyle":{"font-size":"3.2vw","color":"#999","text-align":"center"},"codeBox":{"style":{"width":"20vw","height":"20vw"},"codeSrc":"code.png"},"codeText":"长按识别"}
                },
                {
                    "type":"1", 
                    "poster":{"posterSrc":"poster.png","posterStyle":{"display":"block","width":"100%"}},
                    "content":{"style":{"display":"flex","justify-content": "space-between","align-items": "center","padding":"2.6vw","backgroundColor":"#fff"},"imgStyle":{"display":"block","width":"100%"},"leftStyle":{"display":"flex","line-height":"6vw"}, "photoBox":{"style":{"width":"16vw","height":"16vw","border-radius":"50%","overflow":"hidden"},"photoSrc":"photo.png"},"nickname":{"style":{"font-size":"4.2vw","color":"#333"},"text":"远方的风"},"title":{"style":{"font-size":"4.2vw","color":"#999"},"text":"邀你一起加入云游趣"},"tag":{"style":{"font-size":"3.7vw","color":"#999"},"text":"一个有温度的旅行商城"},"rightStyle":{"font-size":"3.2vw","color":"#999","text-align":"center"},"codeBox":{"style":{"width":"20vw","height":"20vw"},"codeSrc":"code.png"},"codeText":"长按识别"}
                },
             ] ,
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
         
            window.console.log(this.data)
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/public";
.poster-top{
   .poster-top-content{
       padding:vw(10);
       background-color: #fff;
       .poster-top-title{
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           font-size: vw(32);
       }
       .poster-top-price{
           color: #FF6600;
           font-size: vw(32);
           .new-price{
               font-size: vw(52);
               
           }
           .old-price{
               color: #999;
               font-size: vw(28);
           }
       }
   }
}
.poster-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:vw(20);
    background-color: #fff;
    .content-left{
        display: flex;
        line-height: vw(52);
        .photo-box{
            width: vw(120);
            height: vw(120);
            border-radius: 50%;
            overflow: hidden;
            >img{
                width: 100%;
            }
        }
        h3{
            font-size: vw(32);
        }
        p{
            font-size:vw(32);
            color:#999;
        }
        span{
            font-size: vw(28);
            color:#999;
        }
    }
    .content-right{
        font-size: vw(24);
        color: #999;
        text-align: center;
        .code-box{
            width: vw(150);
            height: vw(150);
            overflow: hidden; 
        }
    }
    
    
}
</style>